<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改商品信息')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: bootstrap-fileinput-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-product_info-edit" th:object="${productInfo}">
            <input name="productId" th:field="*{productId}" type="hidden">
            <div class="form-group">    
                <label class="col-sm-3 control-label">商品编码：</label>
                <div class="col-sm-8">
                    <input name="productCore" th:field="*{productCore}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">商品名称：</label>
                <div class="col-sm-8">
                    <input name="productName" th:field="*{productName}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">分类ID：</label>
                <div class="col-sm-8">
                    <select name="categoryId" th:field="*{categoryId}" class="form-control select2-multiple" required>
                        <option th:each="productCategory:${productCategoryList}" th:value="${productCategory.categoryId}" th:text="${productCategory.categoryName}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">学校id：</label>
                <div class="col-sm-8">
                    <select name="numSchoolId" th:field="*{numSchoolId}" class="form-control select2-multiple" required>
                        <option th:each="clFnSchool:${clFnSchoolList}" th:value="${clFnSchool.numId}" th:text="${clFnSchool.vcSchoolName}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">款式id：</label>
                <div class="col-sm-8">
                    <select name="numModelId" th:field="*{numModelId}" class="form-control select2-multiple" required>
                        <option th:each="clFnModel:${clFnModelList}" th:value="${clFnModel.numId}" th:text="${clFnModel.vcModelName}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">服装类型id：</label>
                <div class="col-sm-8">
                    <select name="numClouthTypeId" th:field="*{numClouthTypeId}" class="form-control select2-multiple" required>
                        <option th:each="clothingType:${clothingTypeList}" th:value="${clothingType.numId}" th:text="${clothingType.vcCtypeName}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">上下架状态:</label>
                <div class="col-sm-8">
                    <div class="radio-box" th:each="dict : ${@dict.getType('publishStatus')}">
                        <input type="radio" th:id="${'publishStatus_' + dict.dictCode}" name="publishStatus" th:value="${dict.dictValue}" th:field="*{publishStatus}">
                        <label th:for="${'publishStatus_' + dict.dictCode}" th:text="${dict.dictLabel}"></label>
                    </div>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">商品描述：</label>
                <div class="col-sm-8">
                    <input name="descript" th:field="*{descript}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">商品介绍：</label>
                <div class="col-sm-8">
                    <input name="introduction" th:field="*{introduction}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">图片URL：</label>
                <div class="col-sm-8">
                    <div class="file-loading">
                        <input id="fileinput-demo-1" name="productImg" type="file" multiple>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label"></label>
                <div class="col-sm-8">
                    <input name="picUrl" th:field="*{picUrl}" id="picUrl" class="form-control" type="hidden">
                    <img style="height: 150px;" th:src="@{${productInfo.picUrl}}" id="srcimgurl">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">排序：</label>
                <div class="col-sm-8">
                    <input name="numState" th:field="*{numState}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">价格：</label>
                <div class="col-sm-8">
                    <input id="numProductPrice" name="numProductPrice" th:value="${productInfo.numProductPrice/100}" class="form-control" type="text" required>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <th:block th:include="include :: bootstrap-fileinput-js" />
    <script th:inline="javascript">
        var prefix = ctx + "clothing/product_info";
        $(document).ready(function () {
            initFileInput("fileinput-demo-1", prefix + '/imgUpload');
        });
        $("#form-product_info-edit").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $("#numProductPrice").val($("#numProductPrice").val()*100)
                $.operate.save(prefix + "/edit", $('#form-product_info-edit').serialize());
            }
        }

        $("input[name='indate']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });

        //自动上传文件-JS
        function initFileInput(ctrlName, uploadUrl) {
            var control = $('#' + ctrlName);

            control.fileinput({
                language: 'zh', //设置语言
                uploadUrl: uploadUrl, //上传的地址 (该方法需返回JSON字符串)
                allowedFileExtensions: ['jpg', 'png'],//接收的文件后缀
                showUpload: false, //是否显示上传按钮
                showCaption: false,//是否显示标题
                maxFileCount: 1,
                dropZoneEnabled:false,
                autoReplace:true,
                showCancel:false,
                showPreview:false,
                showRemove:false,
                browseClass: "btn btn-primary", //按钮样式
                //previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                uploadExtraData: { ID: "123" }
            }).on('filebatchselected', function (event, data, id, index) {
                $(this).fileinput("upload");
            }).on("fileuploaded", function (event, data) {
                console.log(data);
                if (data.response) {
                    var url = data.response.data;
                    $("#srcimgurl").attr('src',ctx+url);
                    $("#picUrl").val(url);
                    //通过 data.response.Json对象属性 获得返回数据
                    errors = data.response.ErrorList;
                }
            })
        }
    </script>
</body>
</html>